import { Repository } from "@/atoms/api_repositories"
import { useAuth } from "@/features/useAuth"
import { useAtom } from "jotai"
import { SetVerifyAtom, verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { useNavigate } from "react-router-dom"

import BaseVerifyType from "@/components/forms/BaseVerifyType"
import Image from "@/components/base/Image"
import Svg from "@/components/base/Svg"
import AssetKey from "custom/asset_key"

const EmailIcon = "pages/AccountPage/item/email.webp"
const PhoneIcon = "pages/AccountPage/item/phone.webp"
const ServerIcon = "pages/AccountPage/item/service.webp"
const ArrowRightIcon = <Svg src="pages/AccountPage/line_arrow.svg" />

export default function VeifyType() {
    const navigate = useNavigate()
    const { data: userInfo } = Repository.useUserInfo()
    const { sendVerifyCode } = useAuth()
    const [verifyData] = useAtom(verifyAtom)
    const [, setVerifyData] = useAtom(SetVerifyAtom)

    const sendSmsByEmail = () => {
        if (userInfo?.hasEmail) {
            setVerifyData({
                ...verifyData,
                otpId: "1222",
                verifyMethod: "email",
            })
            navigate("/s-account/form/verify")
        } else {
            //没有邮箱跳转去设置邮箱
            navigate("/s-account/form/email")
        }
    }
    const sendSmsByPhone = () => {
        if (userInfo?.hasPhoneNumber) {
            //手机号码一定存在
            setVerifyData({
                ...verifyData,
                otpId: "1222",
                verifyMethod: "phone",
            })
            navigate("/s-account/form/verify")
        }
    }

    const columns = [
        // {
        //     title: "Email Verification",
        //     icon: EmailIcon as AssetKey,
        //     arrow: ArrowRightIcon,
        //     onClick: sendSmsByEmail,
        // },
        {
            title: "Phone Verification",
            icon: PhoneIcon as AssetKey,
            arrow: ArrowRightIcon,
            onClick: sendSmsByPhone,
        },
        {
            title: "Customer Service",
            icon: ServerIcon as AssetKey,
            arrow: ArrowRightIcon,
            onClick: () => {
                navigate("/my/service")
            },
        },
    ]

    return (
        <BaseVerifyType
            backPath={"/s-account"}
            title="Verify Your Account"
            description="Please choose a verification method to verify your account."
            columns={columns}
        ></BaseVerifyType>
    )
}
